<template>
    <el-card class="form-container" shadow="never">
        <el-form
                :model="room"
                :rules="rules"
                ref="bannerFrom"
                label-width="150px"
                size="small"
        >
<!--            <el-form-item label="房间名:">-->
<!--                <el-input v-model="room.roomName" class="input-width"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="关联设备id:">-->
<!--                <el-input v-model="room.deviceId" class="input-width"></el-input>-->
<!--            </el-form-item>-->
          <el-form-item label="是否禁用:">
            <el-radio-group v-model="room.status">
              <el-radio :label="4">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('bannerFrom')"
                >提交
                </el-button
                >
                <el-button v-if="!isEdit" @click="resetForm('bannerFrom')"
                >重置
                </el-button
                >
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
    import SingleUpload from "@/components/Upload/singleUpload";
    import {createRoom, updateRoom, getRoom} from "@/api/qsg/room";

    const defaultDevice = {};

    export default {
        name: "DeviceDetail",
        components: {SingleUpload},
        props: {
            isEdit: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                room: null,
            };
        },
        created() {
            if (this.isEdit) {
                getRoom(this.$route.query.id).then((response) => {
                    this.room = response.data;
                });
            } else {
                this.room = Object.assign({}, defaultDevice);
            }
        },
        methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm("是否提交数据", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(() => {
                            if (this.isEdit) {
                                updateRoom(this.$route.query.id, this.room).then(
                                    (response) => {
                                        this.$refs[formName].resetFields();
                                        this.$message({
                                            message: "修改成功",
                                            type: "success",
                                            duration: 1000,
                                        });
                                        this.$router.back();
                                    }
                                );
                            } else {
                                createRoom(this.room).then((response) => {
                                    this.$refs[formName].resetFields();
                                    this.room = Object.assign({}, defaultDevice);
                                    this.$message({
                                        message: "提交成功",
                                        type: "success",
                                        duration: 1000,
                                    });
                                });
                            }
                        });
                    } else {
                        this.$message({
                            message: "验证失败",
                            type: "error",
                            duration: 1000,
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.room = Object.assign({}, defaultDevice);
            },
        },
    };
</script>
<style scoped>
    .input-width {
        width: 70%;
    }
</style>


